<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>画图</title>
  <style>
    #cv {
      border-bottom: 2px solid #000;
      border-left: 2px solid #000;
    }

    #btn {
      display: block;
      width: 100px;
      height: 50px;
    }
  </style>
</head>

<body>
  <div id="divContainer">
    铝锭价走势图
    <br/>
    <canvas id="cv">你的设备不支持图表数据显示</canvas>
    <button id="btn">再加一个</button>
  </div>
  <script>    
    (function () {
      window.onload = function () {
        var canvas = document.getElementById('cv'),
          ctx = canvas.getContext('2d'),
          btn = document.getElementById('btn')
        canvas.width = 1252;
        // 走势数据
        var arr = [{ issue: '875341', sum: '21' }, { issue: '875342', sum: '14' }, { issue: '875343', sum: '27' },
        { issue: '875344', sum: '0' },
        { issue: '875345', sum: '5' },
        { issue: '875346', sum: '11' },
        { issue: '875347', sum: '25' },
        { issue: '875348', sum: '13' },
        { issue: '875349', sum: '2' },
        { issue: '875350', sum: '23' },
        { issue: '875351', sum: '21' },
        { issue: '875352', sum: '8' },
        { issue: '875353', sum: '15' }
        ];
        function draw() {
          var l = arr.length;
          canvas.height = l * 40
          ctx.clearRect(0, 0, 1252, canvas.height)
          ctx.strokeStyle = '#5c8535'
          ctx.lineWidth = 3
          ctx.beginPath()
          ctx.moveTo(+(arr[0].sum) * 41 + 125, 60)
          for (var i = 1; i < l; i++) {
            ctx.lineTo(+(arr[i].sum) * 41 + 125, 40 * i + 60)
          }
          ctx.stroke()
        }
        draw()
        btn.addEventListener('click', function () {
          arr.push({ issue: '875341', sum: '13' })
          draw()
        }, false)
      }
    })();    
  </script>
</body>

</html>